<template>
	<div class="charge">
		<van-nav-bar class="title" title="充电" left-arrow @click-left="onClickLeft" />
		<van-row gutter="20" class="top">
			<van-col span="8"></van-col>
			<van-col span="8">
				<div class="main">
					<div class="total">{{total}}<span class="yuan">元</span></div>
					<div class="yuer">钱包余额</div>
				</div>
			</van-col>
			<van-col span="8">
				<div class="right">
					<span class="chongzhi">去充值</span>
					<van-icon name="arrow" style="font-size:15px;color:#fff;" />
				</div>
			</van-col>
		</van-row>
		<van-row type="flex" justify="center">
			<van-col span="22" class="main1 mypadding">
				<van-row type="flex" justify="center">
					<van-col span="22">
						<div class="mainCenter">选择接口</div>
					</van-col>
				</van-row>
				<van-row type="flex" justify="center">
					<van-col span="20">
						<div class="tab">
							<ul>

								<li v-for="(list,index) in randOptions" class="seach-all" :class="{seachchange:changeblue==index}" @click="changeColor(index,list)">
									<div>
										<span>{{list.text}}</span>
									</div>
								</li>


							</ul>
						</div>
					</van-col>
				</van-row>
			</van-col>
		</van-row>
		<van-row type="flex" justify="space-around">
			<van-col span="6"></van-col>
			<van-col span="6" class="blue"></van-col>
			<van-col span="6"></van-col>
		</van-row>
		<van-row type="flex" justify="center">
			<van-col span="22" class="main2 mypadding">
				<van-row type="flex" justify="center">
					<van-col span="22">
						<div class="mainCenter">选择位置</div>
					</van-col>
				</van-row>
				<van-row type="flex" justify="center">
					<van-col span="20">
						<div class="tab2">
							<ul>

								<li v-for="(list,index) in randOptions" class="seach-all" :class="{seachchange:changeblue2==index}" @click="changeColor2(index,list)">
									<div>
										<span>{{list.text}}</span>
									</div>
								</li>


							</ul>
						</div>
					</van-col>
				</van-row>
			</van-col>
		</van-row>
		<van-row type="flex" justify="space-around">
			<van-col span="6"></van-col>
			<van-col span="6" class="blue"></van-col>
			<van-col span="6"></van-col>
		</van-row>
		<van-row type="flex" justify="center">
			<van-col span="22" class="main3">
				<van-row type="flex" justify="center">
					<van-col span="22">
						<div class="mainCenter">选择充电时长</div>
					</van-col>
				</van-row>
				<van-row type="flex" justify="center">
					<van-col span="22">
						<div class="tab3">
							<ul>

								<li v-for="(list,index) in time" class="seach-all" :class="{seachchange:changeblue3==index}" @click="changeColor3(index,list)">
									<div>
										<span>{{list.text}}</span>
									</div>
								</li>


							</ul>
						</div>
					</van-col>
				</van-row>
			</van-col>
		</van-row>
		<div class="confirm">
			<van-button round block type="info" native-type="submit" @click="pay">
				立即充电
			</van-button>
		</div>
		<van-row type="flex" justify="center">
			<van-col span="6">
				<div class="footer">《安全须知》</div>
			</van-col>
		</van-row>
	</div>
</template>
<script>
	export default {
		name: 'exchange',
		data() {
			return {
				total: '0.00',
				sms: '',
				randOptions: [{
						text: '接口2'
					},
					{
						text: '接口2'
					},
					{
						text: '接口2'
					},
					{
						text: '接口2'
					},
					{
						text: '接口2'
					},
					{
						text: '接口2'
					},
					{
						text: '接口2'
					},
					{
						text: '接口2'
					},
					{
						text: '接口2'
					},
					{
						text: '接口2'
					}
				],
				time: [{
						text: '2小时'
					},
					{
						text: '4小时'
					},
					{
						text: '6小时'
					},
					{
						text: '8小时'
					}
				],
				changeblue: "0",
				changeblue2: "0",
				changeblue3: "0",
			};
		},
		mount() {

		},
		methods: {
			pay() {
				//console.log('submit', values);
			},
			onClickLeft() {

			},

			changeColor(index) {
				this.changeblue = index;
			},
			changeColor2(index) {
				this.changeblue2 = index;
			},
			changeColor3(index) {
				this.changeblue3 = index;
			}

		}
	};
</script>
<style lang="less" scoped>
	.charge {
		/deep/ .van-col--20 {
			width: 100% !important
		}

		/deep/ .van-col--22 {
			width: 90% !important
		}

		/deep/ .van-nav-bar__title {
			font-weight: bold !important;
			font-size: 19px !important;
		}

		.top {
			margin-top: 30px;
		}

		.main {
			text-align: center;
		}

		.total {
			font-size: 40px;
			font-family: PingFangSC, PingFangSC-Medium;
			font-weight: 500;
			text-align: center;
			color: #000000;
		}

		.yuan {
			font-size: 14px;
		}

		.yuer {
			font-size: 15px;
			font-family: PingFangSC, PingFangSC-Regular;
			font-weight: 400;
			color: #000000;
			margin-top: 10px;
		}

		.right {
			float: right;
			line-height: 70px;
			;
			margin-right: 20px;
		}

		.chongzhi {
			font-size: 14px;
			font-family: PingFangSC, PingFangSC-Regular;
			font-weight: 400;
			color: #000000;
		}

		.main1 {
			height: auto;
			background: #f2f2f2;
			border-radius: 5px;
			margin-top: 30px;
		}

		.mainCenter {
			font-size: 17px;
			font-family: PingFangSC, PingFangSC-Semibold;
			font-weight: 600;
			text-align: center;
			color: #000000;
			line-height: 50px;
		}

		.van-button--round {
			border-radius: 4px !important;
		}

		/deep/ .van-nav-bar .van-icon {
			color: #212121;
		}

		/deep/ .van-field__label {
			font-size: 36px !important;
		}

		/deep/ .van-button--normal {
			font-size: 18px;
		}

		/deep/ .van-field__label {
			width: 40px !important;
		}

		.confirm {
			margin-top: 38px;
			padding: 14px;
		}

		.tab {
			ul {
				.sell {
					color: red;
				}

				text-align:center;
				margin-top: 5px;
				font-size: 12px;
			}

			.seach-all {
				display: inline-block;
				width: 55px;
				height: 27px;
				margin: 2px;
				border-radius: 7px;
				text-align: center;
				line-height: 27px;
				font-size: 14px;
				color: #9B9B9B;
				border: 1px solid #9b9b9b;
			}



			.seachchange {
				background-color: #006cff;
				border: none;
				color: white;
			}

		}

		.main2 {
			height: auto;
			background: #f2f2f2;
			border-radius: 5px;
		}

		.tab2 {
			ul {
				.sell {
					color: red;
				}

				text-align:center;
				margin-top: 5px;
				font-size: 12px;
			}

			.seach-all {
				display: inline-block;
				width: 55px;
				height: 27px;
				margin: 2px;
				border-radius: 7px;
				text-align: center;
				line-height: 27px;
				font-size: 14px;
				color: #9B9B9B;
				border: 1px solid #9b9b9b;
			}



			.seachchange {
				background-color: #006cff;
				border: none;
				color: white;
			}

		}

		.main3 {
			height: 110px;
			background: #f2f2f2;
			border-radius: 5px;
		}

		.tab3 {
			ul {
				.sell {
					color: red;
				}

				text-align:center;
				margin-top: 5px;
				font-size: 12px;
			}

			.seach-all {
				display: inline-block;
				width: 65px;
				height: 28px;
				margin: 2px;
				border-radius: 7px;
				text-align: center;
				line-height: 27px;
				font-size: 14px;
				color: #9B9B9B;
				border: 1px solid #9b9b9b;
			}



			.seachchange {
				background-color: #006cff;
				border: none;
				color: white;
			}

		}

		.blue {
			// margin-left: 10px;
			// float: left;
			width: 0;
			height: 0;
			border-width: 20px;
			border-style: solid;
			border-color: #9b9b9b transparent transparent transparent;
			margin-top: 10px;
		}

		.footer {
			font-size: 12px;
			font-family: PingFangSC, PingFangSC-Regular;
			font-weight: 400;
			text-align: center;
			color: #212121;
			line-height: 70px;
		}

		.mypadding {
			padding: 12px;
		}
	}
</style>
